<template>
  <div class="classes" v-if="classesList != null">
    <my-tabs :tab-list="tabList"></my-tabs>
    <el-row class="classes-list" :gutter="22" v-if="classesList.length > 0">
      <el-col :span="6" v-for="item in classesList" :key="item.id">
        <div class="item">
          <div class="picture">
            <div class="images" @click="handlePush(item)">
              <edu-image :src="item.cover_url"></edu-image>
              <span class="tag banji">班级</span>
            </div>
            <el-popover
              placement="bottom-end"
              width="65"
              trigger="hover"
              :visible-arrow="false"
              popper-class="classes-popover-hover"
            >
              <div class="classes-popover-content">
                <el-link :underline="false" @click="handleStudent(item.id)">学员管理</el-link>
              </div>
              <el-button slot="reference" icon="el-icon-more" size="mini" circle></el-button>
            </el-popover>
          </div>
          <div class="title" @click="handlePush(item)">{{ item.title }}</div>
        </div>
      </el-col>
    </el-row>
    <edu-no-data v-else></edu-no-data>
    <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
  </div>
</template>

<script>
import MyTabs from '../../components/myTab.vue'
import EduNoData from '@/components/EduNoData'
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    MyTabs,
    EduNoData,
    EduPagination
  },
  data() {
    return {
      tabList: [
        {
          title: '全部'
        }
      ],
      classesList: null
    }
  },
  mounted() {
    this.handleClassesList()
  },
  methods: {
    handleClassesList() {
      this.$api.getCourseclassesTeach(
        {
          page: this.$store.getters['paginate/page'],
          count: 20
        },
        res => {
          this.classesList = res.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 20,
            total: res.data.total
          })
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.handleClassesList()
    },
    // 学员管理
    handleStudent(id) {
      this.$router.push({
        path: '/my/classes/student',
        query: {
          id: id
        }
      })
    },
    // 跳转课程
    handlePush(item) {
      this.$router.push({ path: '/course/' + item.id })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>
<style lang="scss">
.classes-popover-hover {
  min-width: auto !important;
  padding: 5px 0 !important;

  .classes-popover-content {
    .el-link {
      display: flex;
      font-size: 12px;
      padding: 3px 0;
    }
  }
}
</style>
<style lang="scss" scoped>
@import '@/styles/hover.scss';
.classes {
  .classes-list {
    .item {
      margin-bottom: 20px;
      .picture {
        height: 0;
        padding-top: 110px;
        position: relative;
        .images {
          cursor: pointer;
        }
        .el-image {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }
        .tag {
          padding: 5px 8px;
          font-size: 12px;
          font-weight: 400;
          line-height: 1;
          color: #ffffff;
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
          border-radius: 0px 0px 6px 0px;
          position: absolute;
          left: 0;
          top: 0;
          background-color: #ff8a52;
        }
        .el-button {
          position: absolute;
          right: 7px;
          top: 7px;
          border: none;
          padding: 4px;
          opacity: 0;
          @include prefixed(transition-duration, 0.3s);
        }
        &:hover .el-button {
          opacity: 1;
        }
      }
      .title {
        cursor: pointer;
        margin-top: 14px;
        padding: 0 6px;
        color: $text-color-import;
        font-size: 14px;
        @include ellipsis();
      }
    }
  }
}
</style>
